<script setup>
import { Message, MessageBox } from 'element-ui';
import { find, includes, map } from 'lodash-es';
import { useRequest, useWatch } from '@/hooks';
import { getList, getProjectStage, updateProjectByIn } from '@/api/index.js';
import ToolTip from '@/components/ToolTip/index.vue';
const { proxy } = getCurrentInstance();
const props = defineProps({
  type: { type: String, default: () => '' },
  isDefaultSelect: { type: Boolean, default: () => false },
});
const emit = defineEmits(['checkedChange']);
const visible = ref(false);
const popoverRef = ref(null);
const filterText = ref('');
const searchList = ref([]);
const seRadio = ref('');
const status = ref(null);
const statusRadio = ref(null);

const [enterpriseList, searchLoading, run] = useRequest(getList, {
  defaultParams: [{ projectType: props.type }],
  // manual: true,
});
const [statusList] = useRequest(getProjectStage, {
  defaultParams: [props.type],
});

const [, , statusRun] = useRequest(updateProjectByIn, {
  manual: true,
  onSuccess: res => {
    statusRadio.value = null;
    if (res.code === 200) {
      Message.success(res.msg);
      run({ projectType: props.type, entrustStage: status.value });
    }
  },
  onError: () => {
    statusRadio.value = null;
  },
});

const changeInput = () => {
  if (filterText.value.length > 0) {
    searchLoading.value = true;
    searchList.value = [];
    map(enterpriseList.value, v => {
      includes(v.enterpriseName, filterText.value) ? searchList.value.push(v) : null;
    });

    visible.value = true;
    searchLoading.value = false;
  } else {
    visible.value = false;
  }
};
const selectSearchItem = item => {
  if (item) {
    visible.value = false;
    seRadio.value = item;
    const entChecked = find(enterpriseList.value, v => v.enterpriseCode === seRadio.value);
    emit('checkedChange', entChecked);
  }
};
const handleFocus = () => {
  visible.value = filterText.value.length > 0 ? true : false;
};
const checkedChange = () => {
  const entChecked = find(enterpriseList.value, v => v.enterpriseCode === seRadio.value);
  emit('checkedChange', entChecked);
};
const currentStyles = (id, item) => {
  if (proxy.$store.state.global.setting.sideTheme === 'theme-light') {
    return id === item ? { backgroundColor: '#bfd7df' } : '';
  } else {
    return id === item ? { backgroundColor: 'rgba(0, 0, 0, 0.6)' } : '';
  }
};
const handleSave = (item, index) => {
  popoverRef.value[index].doClose();
  statusRun({ inId: item.enterpriseCode, entrustStage: statusRadio.value, projectType: props.type });
};
const changeStatus = val => {
  run({ projectType: props.type, entrustStage: val });
};
const handleShow = (val, item) => {
  map(statusList.value, n => {
    if (item.status === n.value) {
      statusRadio.value = n.key;
      return;
    } else if (!item.status) {
      if (n.value === '无') {
        statusRadio.value = n.key;
        return;
      }
    }
  });
};
useWatch(enterpriseList, n => {
  if (n?.length > 0) {
    seRadio.value = props.isDefaultSelect ? n[0].enterpriseCode : null;
    checkedChange();
  }
});
</script>
<template>
  <div class="u-h100" v-loading="searchLoading">
    <div class="se-input">
      <el-popover placement="bottom" width="290" trigger="manual" v-model="visible" popper-class="u-base-fg">
        <ul
          v-show="filterText.length > 0 && searchList.length !== 0"
          class="su-searchBox"
          :class="$store.state.global.setting.sideTheme === 'theme-light' ? 'su-searchBox-light' : 'su-searchBox-dark'"
          v-loading="searchLoading"
        >
          <li v-for="item in searchList" :key="item.enterpriseCode" @click="selectSearchItem(item.enterpriseCode)">
            {{ item.enterpriseName }}
          </li>
        </ul>
        <div v-show="searchList.length === 0" style="text-align: center; min-height: 100px">无数据</div>
        <el-input
          suffix-icon="el-icon-search"
          size="small"
          slot="reference"
          placeholder="请输入机构名称"
          @input="changeInput(filterText)"
          @blur="visible = false"
          @focus="handleFocus"
          v-model="filterText"
          clearable
        ></el-input>
      </el-popover>
    </div>
    <el-select
      class="u-mt10 u-pl20 u-pr20 u-w100"
      size="small"
      :placeholder="type === 'JC' ? '机构监测状态查询' : '机构托管状态查询'"
      v-model="status"
      @change="changeStatus"
      clearable
    >
      <el-option v-for="item in statusList" :key="item.key" :value="item.key" :label="item.value">
        {{ item.value }}
      </el-option>
    </el-select>
    <div class="se-tyRadio">
      <el-radio-group
        v-if="enterpriseList?.length > 0"
        v-model="seRadio"
        @input="checkedChange"
        v-loading="searchLoading"
      >
        <el-radio
          v-for="(item, index) in enterpriseList"
          :label="item.enterpriseCode"
          :key="item.enterpriseCode"
          :style="currentStyles(seRadio, item.enterpriseCode)"
        >
          <div class="u-df-spb">
            <ToolTip :content="item.enterpriseName" effect="dark" />
            <div>
              <!-- <span v-if="item.status === '准备中'" style="color: #9d1cf2">{{ item.status }}</span>
              <span v-else-if="item.status === '建设中'" style="color: #21a726">{{ item.status }}</span>
              <span v-else-if="item.status === '运营中'" style="color: #ff9900">{{ item.status }}</span> -->
              <!-- <div> -->
              <el-popover
                ref="popoverRef"
                placement="bottom"
                width="150"
                trigger="click"
                popper-class="tree-status-pop"
                @show="handleShow($event, item)"
              >
                <el-radio-group class="status-radio" v-model="statusRadio">
                  <el-radio-button style="width: 200px" v-for="item in statusList" :key="item.key" :label="item.key">
                    {{ item.value }}
                  </el-radio-button>
                </el-radio-group>
                <el-button style="margin-left: 12px" size="small" type="primary" plain @click="handleSave(item, index)">
                  保存
                </el-button>
                <el-button
                  size="small"
                  :icon="!item.status || item.status === '无' ? 'el-icon-more' : null"
                  :class="
                    item.status === '准备中'
                      ? 'yellow'
                      : '' || item.status === '建设中'
                      ? 'zise'
                      : '' || item.status === '运营中'
                      ? 'green'
                      : ''
                  "
                  slot="reference"
                  style="border: none; background-color: transparent"
                >
                  {{ !item.status || item.status === '无' ? '' : item.status }}
                </el-button>
              </el-popover>
              <!-- </div> -->
              <!-- <span v-else>{{ item.status }}</span> -->
              <!-- <i class="el-icon-delete" @click="handleDelete(item)"></i> -->
            </div>
          </div>
        </el-radio>
      </el-radio-group>
      <div v-else class="u-df-ct u-fs14 u-mt20 u-sec-text">暂无数据</div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.u-m20 {
  margin: 20px;
}
.se-input {
  padding: 20px 20px 0 20px;
}
// i {
//   transform: rotate(90deg);
// }

.se-tyRadio {
  margin: 20px;
  padding: 0;
  width: calc(100% - 40px);
  height: calc(100% - 141px);
  .el-radio-group {
    margin: 0;
  }
}
.status-radio {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}
.zise {
  color: #0aafc8;
}
.green {
  color: #21a726;
}
.yellow {
  color: #ff9900;
}
</style>
